<!--
 * @Author: LBH 1336709799@qq.com
 * @Date: 2024-11-05 16:28:28
 * @LastEditors: LBH 1336709799@qq.com
 * @LastEditTime: 2024-11-05 22:54:57
 * @FilePath: \02-HuaWei\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部 -->
    <div class="shortcut wrapper">
        <div class="left">
            <ul>
                <li><a href="#">华为官网</a></li>              
                <li><a href="#">荣耀官网</a></li>            
                <li><a href="#">软件应用 </a></li>             
                <li><a href="#">花粉俱乐部</a></li>              
                <li><a href="#">Select Region</a></li>                           
              </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="#" class="login">登录   注册</a></li>              
                <li><a href="#">我的订单</a></li>            
                <li><a href="#">V码(优购码) </a></li>             
                <li><a href="#">手机版</a></li>              
                <li><a href="#">网站导航</a></li>                           
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <!-- 标题区域 -->
        <div class="title wrapper">
            <div class="left">
                <div class="logo">
                    <img src="./images/logo.huawei.png" alt="">
                </div>
                <div class="page">商城首页</div>
            </div>
            <div class="right">
                <img src="./images/qrcode_vmall_app01.png" alt="">
                <div class="txt">微信扫码关注我们</div>
            </div>
            
        </div>
    </div>
     <!-- 身体 -->
    <div class="banner">
        <!-- 状态栏区域 -->
        <div class="nav">
            <ul>
                <li><a href="#" class="fs">华为专区</a></li>              
                <li><a href="#">HUAWEI P10</a></li>              
                <li><a href="#">HUAWEI Mate9</a></li>              
                <li><a href="#">HUAWEI Nova</a></li>              
                <li><a href="#">华为畅享6S</a></li>              
                <li><a href="#">荣耀专区</a></li>                          
              </ul>
        </div>
        <img src="./images/2017042210305530.jpg" alt="">
        <!-- 侧边栏 -->
        <div class="subnav">
            <ul>
              <div class="navbar">
                <div><a href="#" class="classify">全部商品</a></div>          
              </div>         
              <div class="navbar">
                <div class="classify">手机</div>
                <div class="classify1">HUAWEI Mate系列</div>        
              </div>                  
             <div class="navbar">
                <div class="classify">平板 & 穿戴</div>
                <div class="classify1">平板电脑 手环/手表</div>         
              </div>                 
              <div class="navbar">
                <div class="classify">笔记本电脑</div>
          
              </div>
          
              <div class="navbar">
                <div class="classify">智能家居</div>
                <div class="classify1">子母路由  电力猫  路由</div>
          
              </div>
          
              <div class="navbar">
                <div class="classify">专属配件</div>
                <div class="classify1">贴膜  保护壳  保护套</div>
          
              </div>        
              <div class="navbar">
                <div class="classify">通用配件</div>   
                <div class="classify1">耳机  音箱</div>      
              </div>
                      
            </ul>
          
          </div>
        <!-- 圆点指示器 -->
        <ol>
            <li class="current"><i>1</i></li>
        
            <li><i>2</i></li>
        
            <li><i>3</i></li>

            <li><i>4</i></li>

            <li><i>5</i></li>

            <li><i>6</i></li>

            <li><i>7</i></li>       
          </ol>
    </div>
    <!-- 商品列表 -->
    <div class="goods wrapper">
        <img src="./images/20170310105644358.jpg" alt="">
        <img src="./images/2017031017165551.jpg" alt="">
        <img src="./images/20170310090516264.jpg" alt="">
        <img src="./images/20170313143419135.jpg" alt="">
    </div>
    <!-- 商品以及价格 -->
    <div class="price">
        <div class="phone">
            <div class="txt">
                <h3>HUAWEI P10 PLUS</h3>
                <div class="minitxt">金属钻雕工艺</div>
                <p>¥<span>4388</span></p>
            </div>
            <div class="pic">
                <img src="./images/1489161234073.png" alt="">
            </div>
        </div>
        <div class="phone">
            <div class="txt">
                <h3>HUAWEI nova 青春版</h3>
                <div class="minitxt">炫出我色彩</div>
                 <p>¥<span>1999</span></p>
            </div>
            <div class="pic">
                <img src="./images/1491476650727.png" alt="">
             </div>
            </div>
        <div class="phone">
            <div class="txt">
                <h3>HUAWEI Mate 9 Pro</h3>
                <div class="minitxt">2k双曲面屏</div>
                <p>¥<span>4699</span></p>
                </div>
            <div class="pic">
                <img src="./images/1484219138436.png" alt="">
            </div>

        </div>
    </div>
    <!-- 底部区域 -->
    <div class="footer wrapper">
        <div class="service">
            <ul>
                <li>
                  <h5></h5>   
                  <p>500强企业 品质保证</p>
                </li>
              
                <li>
                  <h5></h5>
              
                  <p>7天退货 15天换货</p>
              
                </li>
              
                <li>
                  <h5></h5>
              
                  <p>99元起免运费</p>
              
                </li>
              
                <li>
                  <h5></h5>
              
                  <p>448家维修网点 全国联保</p>
              
                </li>
              
              </ul>
        </div>
         <!-- 帮助中心 -->
        <div class="help wrapper">
         <dl>
          <dt>帮助中心</dt>
          <dd><p>购物指南</p ></dd>
          <dd><p>配送方式</p ></dd>
          <dd><p>支付方式</p ></dd>
          <dd><p>常见问题</p ></dd>
         </dl>
         <dl>
          <dt>售后服务</dt>
          <dd><p>保修政策</p ></dd>
          <dd><p>退换货政策</p ></dd>
          <dd><p>退换货流程</p ></dd>
          <dd><p>保修状态查询</p ></dd>
         </dl>
         <dl>
          <dt>技术支持</dt>
          <dd><p>售后网点</p ></dd>
          <dd><p>荣耀零售店铺</p ></dd>
          <dd><p>预约维修</p ></dd>
          <dd><p>手机寄修服务</p ></dd>
          <dd><p>维修配件价格查询</p ></dd>
          <dd><p>软件下载</p ></dd>
         </dl>
         <dl>
          <dt>关于商城</dt>
          <dd><p>公司介绍</p ></dd>
          <dd><p>华为商城简介</p ></dd>
          <dd><p>联系客服</p ></dd>
         </dl>
         <dl>
          <dt>关注我们</dt>
          <dd><p>新浪微博</p ></dd>
          <dd><p>腾讯微博</p ></dd>
          <dd><p>花粉俱乐部</p ></dd>
          <dd><p>商城手机版</p ></dd>
         </dl>
        </div>
        <!-- 版权 -->
          <div class="copyright">
              <div class="bottom_text">
               <div>
                友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 |
                莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 |
                刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |
               </div>
               <div>
                中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 |
                多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 |
                拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |
               </div>
               <div>
                阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 |
                电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 |
                移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 |
                <span>申请链接 >></span>
               </div>
               <div class="privacy">
                隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有
                保留一切权利
               </div>
               <div class="public">
                <img src="./images/20160226162651249.png" alt="" />
                苏公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 |
                增值电信业务经营许可证:苏B2-20130048 |
                网络文化经营许可证：苏网文[2015] 1599-026号
               </div>
               <div class="bottom_img">
                <img src="./images/20161224180914742.jpg" alt="" />
                <img src="./images/20160226162415360.png" alt="" />
                <img src="./images/20160226162521265.png" alt="" />
                <img src="./images/20160226162531395.png" alt="" />
               </div>
              </div>
             </div>


    </div>




      
</body>
</html>